<template>
	<view class="uni-fab-box">
		<uni-fab ref="fab" horizontal="right" vertical="bottom" @fabClick="addCostClick" :popMenu="false" />
		
		<view v-if="!costLists || costLists.length === 0" class="uni-flex uni-row" 
			style="-webkit-justify-content: center;justify-content: center;">
			<view class="none-tip-text">暂无数据</view>
		</view>
		
		<view v-else>
			<uni-card v-for="(item,index) in costLists" :extra="item.state === 0 ? '未审核': item.state === 1 ? '审核通过' : '审核拒绝'" :title="item.costName" isShadow @click="handleCostClick(item)">
				<view><text class="content-box-text">金额：{{item.costAmount}}</text></view>
				<view><text class="content-box-text">描述：{{item.costDesc}}</text></view>
			</uni-card>
		</view>
		
	</view>
</template>

<script>
	import { getCostListForClient } from '@/api/projectCostInfo.js'
	export default {
		onLoad() {
		},
		onShow(){
			this.costQuery.page = 1;
			this.costLists = [];
			this.getCostLists();
		},
		data() {
			return {
				costQuery: {
					page: 1,
					size: 10,
					param: {
						projectId: 0,
						state: -1
					}
				},
				costTotal: 0,
				costLists:[],
				isLoading: false
			}
		},
		onReachBottom(){
			if(this.isLoading || this.costLists.length >= this.costTotal) {
				return;
			}
			this.isLoading = true;
			this.costQuery.page = this.costQuery.page + 1;
			this.getCostLists();
		},
		onPullDownRefresh() {
			this.costQuery.page = 1;
			this.costLists = [];
			this.getCostLists();
		},
		methods: {
			// 跳转到增加报销列表
			addCostClick() {
				uni.navigateTo({
					url: "/pages/costInfo/cost-add"
				})
			},
			// 获取报销列表
			getCostLists() {
				getCostListForClient(this.costQuery)
				.then(resp => {
					resp.datas.datas.forEach(x=> this.costLists.push(x))
					this.costTotal = resp.datas.total;
					this.isLoading = false;
					uni.stopPullDownRefresh();
				})
				.catch(error => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: error,
						duration: 2000,
						icon: "none"
					});
				});
			},
			// 报销项目点击事件 跳转到详情页面
			handleCostClick(item) {
				uni.navigateTo({
					url: '/pages/costInfo/cost-item?id=' + encodeURIComponent(item.id)
				});
			},
		}
	}
</script>

<style>
	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;
	}
</style>
